<template>
  <div class="profile-page">
    <!-- tsparticles 粒子背景 -->
    <ParticleBackground />

    <!-- 动态背景元素 -->
    <div class="background-elements">
      <!-- 彩色渐变圆 -->
      <div class="gradient-circle circle-1" />
      <div class="gradient-circle circle-2" />
      <div class="gradient-circle circle-3" />

      <!-- 装饰性几何图形 -->
      <div class="geometric-shape shape-1" />
      <div class="geometric-shape shape-2" />
      <div class="geometric-shape shape-3" />

      <!-- 点状装饰 -->
      <div class="dot-pattern" />
    </div>

    <!-- 顶部装饰 -->
    <div class="wave-top">
      <svg
        class="wave-svg"
        data-name="Layer 1"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1200 120"
        preserveAspectRatio="none"
      >
        <path
          d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
          class="wave-path"
        />
      </svg>
    </div>

    <!-- 英雄部分 - 全屏高度 -->
    <section class="hero-section">
      <div class="hero-content">
        <div class="avatar-container">
          <div class="avatar-glow" />
          <div class="avatar-wrapper">
            <el-avatar
              :size="200"
              src="/placeholder.svg?height=200&width=200"
              class="avatar-image"
            />
          </div>
        </div>

        <h1 class="hero-title">{{ userInfo?.username }}</h1>

        <div class="tag-container">
          <el-tag
            color="#ff7c7c"
            class="pulse-tag"
          >28岁</el-tag
          >
          <el-tag
            color="#ffb56b"
            class="pulse-tag"
          >178cm</el-tag
          >
          <el-tag
            color="#6bceff"
            class="pulse-tag"
          >本科</el-tag
          >
          <el-tag
            color="#a78bfa"
            class="pulse-tag"
          >未婚</el-tag
          >
        </div>

        <div class="location">
          <MapPin class="location-icon" />
          <span>您的城市，国家</span>
        </div>

        <p class="hero-description">
          一句简短的自我介绍，展示您的性格特点和生活态度。这句话应该能够让人对您产生初步印象和兴趣。
        </p>

        <div class="contact-buttons">
          <el-button
            type="primary"
            circle
            class="primary-button phone-button"
          >
            <Phone class="button-icon" />
          </el-button>
          <el-button
            type="primary"
            circle
            class="primary-button message-button"
          >
            <MessageSquare class="button-icon" />
          </el-button>
        </div>

        <el-button
          text
          class="scroll-button"
          @click="scrollToContent"
        >
          <ChevronDown class="scroll-icon" />
        </el-button>
      </div>
    </section>

    <!-- 内容部分 -->
    <div class="content-container">
      <!-- 关于我 -->
      <section
        ref="aboutRef"
        class="section about-section"
      >
        <div class="section-header">
          <div class="header-line left-line" />
          <h2 class="section-title about-title">
            <span>关于我</span>
            <Sun class="title-icon sun-icon" />
          </h2>
          <div class="header-line right-line" />
        </div>

        <el-card
          class="content-card about-card"
          shadow="hover"
        >
          <p class="about-paragraph">
            在这里详细介绍自己，包括您的性格特点、生活态度和价值观。可以分享一些您的生活经历和成长故事，展示您的真实一面。
            描述您对待生活、工作和人际关系的态度，以及您认为重要的品质和原则。这部分内容应该能够让对方了解您是一个什么样的人。
          </p>

          <el-row :gutter="24">
            <el-col
              :xs="24"
              :md="12"
            >
              <div class="info-box work-box">
                <div class="info-header">
                  <div class="icon-container work-icon-bg">
                    <Briefcase class="info-icon work-icon" />
                  </div>
                  <h4 class="info-title work-title">工作与事业</h4>
                </div>
                <p class="info-description">
                  描述您的职业和工作情况，包括您的职位、行业以及工作内容。可以分享您对工作的热情和成就，以及您的职业规划和目标。
                </p>
              </div>
            </el-col>

            <el-col
              :xs="24"
              :md="12"
            >
              <div class="info-box life-box">
                <div class="info-header">
                  <div class="icon-container life-icon-bg">
                    <Home class="info-icon life-icon" />
                  </div>
                  <h4 class="info-title life-title">生活状况</h4>
                </div>
                <p class="info-description">
                  描述您的生活状况，包括住房情况、经济状况等。可以分享您的生活方式和日常习惯，让对方了解与您生活在一起会是什么样子。
                </p>
              </div>
            </el-col>

            <el-col
              :xs="24"
              :md="12"
            >
              <div class="info-box family-box">
                <div class="info-header">
                  <div class="icon-container family-icon-bg">
                    <Users class="info-icon family-icon" />
                  </div>
                  <h4 class="info-title family-title">家庭背景</h4>
                </div>
                <p class="info-description">
                  简单介绍您的家庭情况，包括父母、兄弟姐妹等。可以分享您的家庭观念和与家人的关系，展示您对家庭的重视程度。
                </p>
              </div>
            </el-col>

            <el-col
              :xs="24"
              :md="12"
            >
              <div class="info-box goal-box">
                <div class="info-header">
                  <div class="icon-container goal-icon-bg">
                    <Target class="info-icon goal-icon" />
                  </div>
                  <h4 class="info-title goal-title">人生目标</h4>
                </div>
                <p class="info-description">
                  分享您的人生目标和价值观，包括您对未来的规划和期望。这部分内容可以展示您的上进心和责任感，以及您对生活的态度。
                </p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </section>

      <div class="divider-container">
        <el-divider class="section-divider" />
        <div class="divider-icon-container">
          <Zap class="divider-icon zap-icon" />
        </div>
      </div>

      <!-- 教育与工作 -->
      <section class="section education-section">
        <div class="section-header">
          <div class="header-line left-line" />
          <h2 class="section-title education-title">
            <span>教育与工作</span>
            <Award class="title-icon award-icon" />
          </h2>
          <div class="header-line right-line" />
        </div>

        <el-card
          class="content-card education-card"
          shadow="hover"
        >
          <div class="timeline">
            <div class="timeline-item work-item">
              <div class="timeline-icon-container">
                <Briefcase class="timeline-icon" />
              </div>
              <div class="timeline-content">
                <span class="timeline-date">2020 - 至今</span>
                <h4 class="timeline-title work-timeline-title">您的职位</h4>
                <span>您的公司</span>
                <p class="timeline-description">
                  描述您的工作内容、职责和成就。可以分享您在工作中的专业能力和贡献，以及您如何处理工作中的挑战。
                </p>
              </div>
            </div>

            <div class="timeline-item education-item">
              <div class="timeline-icon-container education-icon-container">
                <GraduationCap class="timeline-icon" />
              </div>
              <div class="timeline-content">
                <span class="timeline-date">2016 - 2020</span>
                <h4 class="timeline-title education-timeline-title">
                  您的学位
                </h4>
                <span>您的学校</span>
                <p class="timeline-description">
                  描述您的教育经历、专业和学习成果。可以分享您在学校期间的经历和收获，以及您如何将所学知识应用到实际生活中。
                </p>
              </div>
            </div>
          </div>
        </el-card>
      </section>

      <div class="divider-container">
        <el-divider class="section-divider" />
        <div class="divider-icon-container">
          <Heart class="divider-icon heart-icon" />
        </div>
      </div>

      <!-- 兴趣爱好 -->
      <section class="section interests-section">
        <div class="section-header">
          <div class="header-line left-line" />
          <h2 class="section-title interests-title">
            <span>兴趣爱好</span>
            <Smile class="title-icon smile-icon" />
          </h2>
          <div class="header-line right-line" />
        </div>

        <el-row :gutter="24">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
          >
            <el-card
              class="interest-card coffee-card"
              shadow="hover"
              :body-style="{ padding: 0 }"
            >
              <div class="interest-header coffee-header">
                <Coffee class="interest-bg-icon" />
              </div>
              <div class="interest-content">
                <h4 class="interest-title">咖啡与阅读</h4>
                <p class="interest-description">
                  描述您喜欢的休闲方式，例如在咖啡馆阅读或思考。分享您喜欢的书籍类型和作者，以及这些爱好如何丰富您的生活。
                </p>
              </div>
            </el-card>
          </el-col>

          <el-col
            :xs="24"
            :sm="12"
            :md="8"
          >
            <el-card
              class="interest-card travel-card"
              shadow="hover"
              :body-style="{ padding: 0 }"
            >
              <div class="interest-header travel-header">
                <Plane class="interest-bg-icon" />
              </div>
              <div class="interest-content">
                <h4 class="interest-title">旅行探索</h4>
                <p class="interest-description">
                  分享您的旅行经历和对新地方的探索热情。可以提到您去过的一些地方，以及旅行中的难忘经历和收获。
                </p>
              </div>
            </el-card>
          </el-col>

          <el-col
            :xs="24"
            :sm="12"
            :md="8"
          >
            <el-card
              class="interest-card music-card"
              shadow="hover"
              :body-style="{ padding: 0 }"
            >
              <div class="interest-header music-header">
                <Music class="interest-bg-icon" />
              </div>
              <div class="interest-content">
                <h4 class="interest-title">音乐与艺术</h4>
                <p class="interest-description">
                  描述您对音乐和艺术的兴趣，包括您喜欢的音乐类型、乐器或艺术形式。分享这些爱好如何影响您的情感和思维方式。
                </p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </section>

      <div class="divider-container">
        <el-divider class="section-divider" />
        <div class="divider-icon-container">
          <Camera class="divider-icon camera-icon" />
        </div>
      </div>

      <!-- 生活方式 -->
      <section class="section lifestyle-section">
        <div class="section-header">
          <div class="header-line left-line" />
          <h2 class="section-title lifestyle-title">
            <span>生活方式</span>
            <Star class="title-icon star-icon" />
          </h2>
          <div class="header-line right-line" />
        </div>

        <el-row :gutter="24">
          <el-col
            :xs="24"
            :md="12"
          >
            <el-card
              class="lifestyle-card daily-card"
              shadow="hover"
            >
              <div class="lifestyle-header">
                <div class="lifestyle-icon-container daily-icon-bg">
                  <Clock class="lifestyle-icon daily-icon" />
                </div>
                <h4 class="lifestyle-title daily-title">日常生活</h4>
              </div>
              <p class="lifestyle-description">
                描述您的日常生活和习惯，包括您如何安排时间、工作与生活的平衡等。这部分内容可以让对方了解与您生活在一起的日常节奏。
              </p>
              <ul class="lifestyle-list">
                <li class="list-item">
                  <div class="list-bullet daily-bullet" />
                  <span class="list-text">早起习惯，喜欢晨跑</span>
                </li>
                <li class="list-item">
                  <div class="list-bullet daily-bullet" />
                  <span class="list-text">工作专注，注重效率</span>
                </li>
                <li class="list-item">
                  <div class="list-bullet daily-bullet" />
                  <span class="list-text">周末喜欢户外活动</span>
                </li>
                <li class="list-item">
                  <div class="list-bullet daily-bullet" />
                  <span class="list-text">注重健康饮食</span>
                </li>
              </ul>
            </el-card>
          </el-col>

          <el-col
            :xs="24"
            :md="12"
          >
            <el-card
              class="lifestyle-card quality-card"
              shadow="hover"
            >
              <div class="lifestyle-header">
                <div class="lifestyle-icon-container quality-icon-bg">
                  <Utensils class="lifestyle-icon quality-icon" />
                </div>
                <h4 class="lifestyle-title quality-title">生活品质</h4>
              </div>
              <p class="lifestyle-description">
                分享您对生活品质的追求和理解，包括您如何平衡物质和精神需求，以及您对舒适生活的定义。
              </p>
              <ul class="lifestyle-list">
                <li class="list-item">
                  <div class="list-bullet quality-bullet" />
                  <span class="list-text">热爱烹饪，享受美食</span>
                </li>
                <li class="list-item">
                  <div class="list-bullet quality-bullet" />
                  <span class="list-text">注重居家环境的舒适</span>
                </li>
                <li class="list-item">
                  <div class="list-bullet quality-bullet" />
                  <span class="list-text">喜欢收集有意义的物品</span>
                </li>
                <li class="list-item">
                  <div class="list-bullet quality-bullet" />
                  <span class="list-text">重视精神生活和个人成长</span>
                </li>
              </ul>
            </el-card>
          </el-col>
        </el-row>
      </section>

      <div class="divider-container">
        <el-divider class="section-divider" />
        <div class="divider-icon-container">
          <Heart class="divider-icon heart-icon" />
        </div>
      </div>

      <!-- 对未来的期望 -->
      <section class="section future-section">
        <div class="section-header">
          <div class="header-line left-line" />
          <h2 class="section-title future-title">
            <span>对未来的期望</span>
            <Sun class="title-icon sun-icon" />
          </h2>
          <div class="header-line right-line" />
        </div>

        <el-card
          class="content-card future-card"
          shadow="hover"
        >
          <div class="future-relationship">
            <div class="future-header">
              <div class="future-icon-container relationship-icon-bg">
                <Heart class="future-icon relationship-icon" />
              </div>
              <h4 class="future-title relationship-title">理想的关系</h4>
            </div>
            <p class="future-description">
              描述您对理想关系的理解和期望，包括您认为重要的相处方式、沟通方式和共同成长的愿景。
              分享您对婚姻和家庭的看法，以及您希望与伴侣一起建立什么样的生活。
            </p>
          </div>

          <div class="future-partner">
            <div class="future-header">
              <div class="future-icon-container partner-icon-bg">
                <Users class="future-icon partner-icon" />
              </div>
              <h4 class="future-title partner-title">理想的伴侣</h4>
            </div>
            <p class="future-description">
              描述您心目中理想伴侣的特质和价值观，但要避免过于具体的外表要求。
              重点强调您看重的品格、生活态度和共同兴趣，以及您希望与伴侣一起实现的目标。
            </p>
            <el-row :gutter="16">
              <el-col
                :xs="24"
                :sm="12"
              >
                <el-card
                  class="trait-card personality-card"
                  shadow="never"
                >
                  <template #header>
                    <div class="trait-title">
                      <Heart class="trait-icon heart-trait-icon" />
                      <span>性格特质</span>
                    </div>
                  </template>
                  <p class="trait-description">
                    温柔体贴，善解人意，有自己的主见，乐观积极，有责任感
                  </p>
                </el-card>
              </el-col>
              <el-col
                :xs="24"
                :sm="12"
              >
                <el-card
                  class="trait-card values-card"
                  shadow="never"
                >
                  <template #header>
                    <div class="trait-title">
                      <Star class="trait-icon star-trait-icon" />
                      <span>共同价值观</span>
                    </div>
                  </template>
                  <p class="trait-description">
                    重视家庭，愿意共同成长，相互支持，尊重彼此的独立空间
                  </p>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </section>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <p class="footer-text">期待与您相遇 <Heart class="footer-icon" /></p>
    </div>

    <!-- 底部装饰 -->
    <div class="wave-bottom">
      <svg
        class="wave-svg"
        data-name="Layer 1"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1200 120"
        preserveAspectRatio="none"
      >
        <path
          d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
          class="wave-path bottom-wave-path"
        />
      </svg>
    </div>
  </div>
</template>

<script setup>
import { findUserInfo } from '@w/apis/user'
import {
  Briefcase,
  GraduationCap,
  Heart,
  Home,
  MapPin,
  MessageSquare,
  Phone,
  Coffee,
  Utensils,
  Plane,
  Music,
  ChevronDown,
  Target,
  Users,
  Clock,
  Camera,
  Smile,
  Sun,
  Zap,
  Award,
  Star
} from 'lucide-vue-next'

import ParticleBackground from './ParticleBackground.vue'

import useUserStore from '~stores/module/user'

const { userInfo } = useUserStore()

const aboutRef = ref(null)
const scrolled = ref(false)
const userData = ref(null)

const scrollToContent = () => {
  aboutRef.value?.scrollIntoView({ behavior: 'smooth' })
}

const handleScroll = () => {
  scrolled.value = window.scrollY > 100
}

const getUserInfo = async() => {
  const { data } = await findUserInfo(userInfo.id)
  userData.value = data
  console.log('output->data',data)
}
getUserInfo()

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>
